由於 Figma 的核心是 GUI 設計工具，附帶原型製作能力，所以一般來說我們都會使用它來進行高精度原型設計，說到這裡，你會不會想問，有高精度，那是不是也有低精度？

沒錯！Day 6. 常見原型種類及製作方式 這篇提到的幾乎都是指低精度原型，當時我們也透過 使用 Invision 帶大家一起實作了一個 簡單的範例。

實際上，在產品設計與開發的過程中，這二種原型其實會交互採用。我們先來拆解說明這二種原型的差別。

Lo-Fi Prototype 低精度原型

又稱低保真原型 (Low-fidelity prototype)，通常外觀簡單、未經美感細節作修飾，互動性也相當有限，但已足以展示核心概念與基本流程。

優點：能夠快速製作，且因為除去了視覺設計元素的干擾，讓團隊成員更能夠將注意力放在宏觀層面的流程、邏輯與資訊架構上。

工具：除了傳統用紙筆畫及將各種素材，如便利貼、厚紙、風扣板等，組合成可互動、抽換內頁的模型之外，也有一些數位工具可協助我們更有效率的製作，例如 Invision、Marvel APP、Balsamiq mockups 等。當然，想用 Figma、Adobe XD 做低精度原型當然也沒問題。

Hi-Fi Prototype 高精度原型

又稱高保真原型 (High-fidelity prototype)，與 Lo-Fi Prototype 相對而言，外觀擁有大量細節堆疊 (例如陰影、漸層、美麗且風格一致的 icon)，互動上也會刻畫的比較細緻 (比如從 A 畫面過渡到 B 畫面的轉場從左方 Push 到 右方進場)。

高精度原型不論看起來還是用起來，都會和真實產品非常接近，不太會有模糊的想像空間。

工具：在 UX 逐漸成為顯學的現在，有了愈來愈多的選擇，像是 Principle、Flinto、ProtoPie、Axure RP、Framer，以及本系列專欄的主角之一，Figma。

那麼 Rson，試問何時該採用 Lo-Fi，何時以又該採 Hi-Fi 呢？

各階段製作原型的精度策略

在整個產品設計開發階段中，都會有需要製作原型的時候，只是不同階段的目標不同，進而會影響到原型製作的策略與精細度的採用。

1. 前期－探索階段

   一開始一切都還很混沌不明時，製作原型的目的是讓大家能夠一起探索、大量發想，鼓勵團隊多動手透過原型溝通，所以會採用低精度原型的策略，一來這樣速度才夠快，二來大家也不會被沉默成本影響，捨不得丟棄不好的概念。

2. 早期－提案階段

   盡情探索完可能性之後，已開始逐漸收斂，產品的概念也愈來愈清晰了。此時，向利害關係人提案、成功說服成為最重要的目標，故非常適合好好設計高精度原型，透過在外觀、美感上的堆疊，以及貼近真實的互動操作，讓關係人使用，產生強烈認同感，進而爭取到開發資源。畢竟，人是視覺及情感的動物，此階段的原型愈接近最後的成品，愈能夠讓人深度感受。

3. 中期－開發階段

   爭取到開發資源後，有了前後端工程師夥伴的火力支援，產品落地指日可待。此時製作原型目的則是要加速工程師在實作時對於設計上全面的理解，再加上此時的原型還需考慮到技術上是否可行，故此階段需製作的也是高精度原型，才能夠與工程師溝通、交付設計。

4. 後期－優化階段

   此時產品已經進入市場，一方面會得到使用者反饋，另一方面商業層可能會有轉化率的目標，易用性成為此階段的關鍵任務。此時就需要在製作成本及測試效果上做出取捨，決定採用高精度或是低精度原型，這時就沒有一定的模式了。

不論在哪個階段，採用的原型精度是低還是高，都可以搭配之前介紹過的 放聲思考法 進行易用性測試 。當然，易用性測試有很多種方法，放聲思考只是其中成本算低、效果也還不錯的質化方式。

Figma 全站式設計－從 GUI 直接到原型製作

回到 Figma 的 Prototype 功能，上一篇 我們說明了 Figma 製作原型的觀念與基本操作方式，而設計好原型之後，可透過 URL 連結，直接分享給任何人，如此一來，我們就能覆蓋到前面所提到任何一個需要高精度原型的情境：

(1) 將 Hi-Fi Prototype 展示給關係人看，讓設計得以更具體可見，並取得反饋。

(2) 交付給工程師的設計規格文件 ，其 GUI Mockup 、 spec、prototype 從此都在一處，再也不分家 ，且因為都是一條龍使用 Figma 製作，所以 Component 也可以重覆使用，節省製作時間 (Day 24. 打造可重覆使用的設計－Figma 的 Component 元件解析)

(3) 透過轉發連結，輕易就能讓受測者進行易用性測試，不需要再另外使用別的工具，製作讓受測者測試用的 Prototype

如何？ Figma 是不是頗有倚天屠龍記中 「武林盟主，一統江湖」的氣勢？

不過 Rson 想提醒大家的是，Figma 的原型設計功能仍只能方便地製作出已常見定義的互動行為，若要控制到更精細程度的原型，比如說動畫漸變的細節、跨越多裝置跨多屏的互動、甚至是與硬體產生連動的事件行為，還是得使用更為專業製作 Prototype 的原型工具，比如 Protopie、Framer。如果你身處的組織是研發設計中心，很可能經常需要設計尚未被當代定義好的下一代互動體驗，那麼 Protopie、Framer 甚至是請體驗工程師直接 coding，才會是更適合的途徑。